<template>
  <img
    src="/static/rightMask.png"
    class="fixed top-0 right-0 w-[400px] h-full"
    alt=""
  />
  <div
    class="fixed z-[10] w-[500px] right-[0px] top-[36px] bottom-[50px] animate__animated animate__fadeInRight"
  >
    <homeRight v-if="nowActive == 'home'"></homeRight>
    <yingjiRight v-if="nowActive == 'yingjiguanli'"></yingjiRight>
    <huanbaoRight v-if="nowActive == 'huanbaojianche'"></huanbaoRight>
    <jiaotongRight v-if="nowActive == 'jiaotongwuliu'"></jiaotongRight>
    <renliRight v-if="nowActive == 'renliziyuan'"></renliRight>
    <zonghefuwuRight v-if="nowActive == 'zonghefuwu'"></zonghefuwuRight>
    <jinjiRight v-if="nowActive == 'jingjifenxi'"></jinjiRight>
  </div>
</template>

<script setup>
import homeRight from "@/components/three/component/bigScreetn/home/right.vue";
import yingjiRight from "@/components/three/component/bigScreetn/yingjiguanli/right.vue";
import huanbaoRight from "@/components/three/component/bigScreetn/huanbaojianche/right.vue";
import jiaotongRight from "@/components/three/component/bigScreetn/jiaotongwuliu/right.vue";
import renliRight from "@/components/three/component/bigScreetn/renliziyuan/right.vue";
import zonghefuwuRight from "@/components/three/component/bigScreetn/zonghefuwu/right.vue";
import jinjiRight from "@/components/three/component/bigScreetn/jinjiyunxin/right.vue";

import { commonStore } from "@/stores";
import { storeToRefs } from "pinia";
const comStore = commonStore();
const { nowActive } = storeToRefs(comStore);
</script>
<style scoped lang="less">
.transitionPanel {
  transition:
    right 0.7s ease-in-out,
    width 1s ease-in-out,
    opacity 0.7s ease-in-out;
}
.showPanel {
  opacity: 1;
  right: 0;
  //width: 100%;
}
.hidePanel {
  opacity: 0;
  //width: 0%;
  right: -120%;
}
.opt {
  transition:
    right 0.7s ease-in-out,
    left 0.7s ease-in-out;
}
.optToLeft {
  right: 0px;
}
.optToRight {
  right: 360px;
}
</style>
